<template>
  <el-form :inline="true" :model="queryParams" class="filter-form-inline" label-position="right" size="small">
    <el-row :gutter="40">
      <el-col :lg="6" :xs="8">
        <el-form-item label="商销客户名称" style="width: 100%">
          <el-input v-model="queryParams.keyWord" @change="handleChange" clearable placeholder="商销客户名称" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

  <table-view :cell-style="cellStyle" :data="tableData" border header-cell-class-name="table-header" size="medium"
    @sort-change="handlSort" @row-click="aloneClick">
    <el-table-column :show-overflow-tooltip="true" header-align="center" label="商销客户编号" prop="sellerNumber" />

    <el-table-column :show-overflow-tooltip="true" header-align="center" label="商销客户名称" prop="sellerName" />

    <el-table-column :show-overflow-tooltip="true" header-align="center" label="企业所在地区" prop="region">
      <template #default="{row}">
        <span v-if=" row.provinceName">{{ row.provinceName }}/{{ row.cityName }}/{{ row.areaName }}</span>
      </template>
    </el-table-column>

    <el-table-column :show-overflow-tooltip="true" align="center" label="创建人" prop="creatorName" />

    <el-table-column :show-overflow-tooltip="true" align="center" label="创建时间" prop="createdAt">
      <template #default="{row}">
        {{ dateFormat("yyyy-mm-dd HH:MM:SS", row.createdAt) }}
      </template>
    </el-table-column>

    <el-table-column :show-overflow-tooltip="true" align="center" label="状态" prop="terminalStatus">
      <template #default="{row}">
        <div style="line-height: 20px"> {{ getLabel('confirmStatus', row.confirmStatus) }}</div>
        <!-- <div style="line-height: 20px" class="flow-status-color"
          v-if="(row.sellerStatus === '2' || row.sellerStatus === '4') && row?.flowStatus === 'DOING'">
          [变更审核中]
        </div> -->
      </template>
    </el-table-column>

    <el-table-column align="center" label="操作">
      <template #default="{row}">
        <el-button v-auth="{v: ['crm:marketing:cooperationInformation:shangPin:change']}" type="text"
          @click="handleEdit(row,2)">
          变更信息
        </el-button>

        <!-- <el-button v-auth="{v: ['crm:marketing:cooperationInformation:shangPin:dele'],
              bool:row.sellerStatus === '-2' || row.sellerStatus === '-1'}" type="text" @click="handlDelete(row.id)">
          删除
        </el-button>

        <el-button v-auth="{v: ['crm:marketing:cooperationInformation:shangPin:edit'],
        bool:row.sellerStatus === '-2' || row.sellerStatus === '-1' || row.sellerStatus === '-3'}" type="text"
          @click="handleEdit(row,1)">
          编辑
        </el-button>

        <el-button v-auth="{v: ['crm:marketing:cooperationInformation:shangPin:change'],
        bool:(row.sellerStatus === '2' || row.sellerStatus === '4') && row?.flowStatus !== 'DOING'}" type="text"
          @click="handleEdit(row,2)">
          变更信息
        </el-button> -->

      </template>
    </el-table-column>
  </table-view>
  <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.page" :total="total"
    style="display: flex; justify-content: flex-end" @pagination="handlList" />

  <newForm ref="newFormRef" @succsess="succsess" />
</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRouter, useRoute } from "vue-router";

export default {
  components: {
    newForm: defineAsyncComponent(() => import("../modules/newForm.vue")),
  },
  setup() {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    const currentInstance = getCurrentInstance();
    const data = reactive({
      queryParams: {
        keyWord: "",
        tabType: "1",
        pageSize: 20,
        page: 1,
      },
      total: 0,
      tableData: [{ id: 0 }],
      newFormRef: null,
    });

    const handleChange = (val) => {
      if (val) {
        data.queryParams.keyWord = val;
      } else {
        data.queryParams = {
          keyWord: "",
          tabType: "1",
          pageSize: 20,
          page: 1,
        };
      }
      handlList();
    };

    // 获取列表
    const handlList = () => {
      api.shangPin.SHANGPIN_LIST(data.queryParams).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list || [];
          data.total = res.data.total;
        }
      });
    };

    // 单机表格
    const aloneClick = (row, column, event) => {
      if (column.label === "操作" || column.label === "查看文件") return;
      router.push({
        name: "shangPinPotentialDetails",
        query: { id: row.id },
      });
    };

    // 鼠标样式
    const cellStyle = () => {
      return "cursor:pointer;";
    };

    //删除
    const handlDelete = (id) => {
      currentInstance.proxy
        .alertBox({ message: "删除数据后不可恢复,确定删除？" })
        .then(() => {
          api.shangPin.SHANGPIN_DELETE(id).then((res) => {
            if (res.code === 0) {
              currentInstance.proxy.customMessage({
                type: "success",
                message: "删除成功",
              });
              handlList();
            } else {
              currentInstance.proxy.customMessage({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    };

    //打开弹框
    const handleDialog = () => {
      var title = "新建商销客户";
      data.newFormRef.open(title, null);
      console.log(2);
    };

    //编辑
    const handleEdit = (val, num) => {
      var title = "";
      if (num === 1) {
        title = "编辑商销客户";
      }
      if (num === 2) {
        title = "变更商销客户";
      }
      data.newFormRef.open(title, val);
    };

    const succsess = () => {
      handlList();
    };

    onMounted(() => {
      handlList();
      setTimeout(() => {
        if (route.query.type) {
          handleDialog();
        }
      }, 1000);
    });

    return {
      ...toRefs(data),
      handleChange,
      handlList,
      aloneClick,
      cellStyle,
      handlDelete,
      handleDialog,
      handleEdit,
      succsess,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>